<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="margin-bottom:100px;" v-if="items.length">
      <van-notice-bar v-if="IsLogin" mode="closeable">您还未登录请先登录<a @click="$router.push('login?from=%2Forder')" href="javascript:;">点击登录</a></van-notice-bar>
      <van-swipe-cell v-for="(item, index) in items" :key="item.id">
        <div class="list">
          <van-checkbox
            @click="selcted(index)"
            v-model="item.checked"
            checked-color="#ee0a24"
          />
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.name"
            :thumb="item.imgs.split('||')[0]"
          >
            <template #footer>
              <van-stepper @change="numChange" v-model="item.num" />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="delListData(index)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-empty
      description="购物车空空如也"
      image="https://img2.baidu.com/it/u=3214428190,3968304704&fm=26&fmt=auto&gp=0.jpg"
      v-else
    >
      <van-button
        round
        type="danger"
        class="bottom-button"
        @click="$router.push('/home')"
        >去购物</van-button
      >
    </van-empty>
    <van-submit-bar v-if="items.length" :price="total" @submit="Order" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
import { isLogin } from '@utils'
export default {
  data () {
    return {
      checked: false,
      IsLogin: !isLogin()
    }
  },
  methods: {
    init () {
      this.calc_m()
      this.checked = this.$store.state.CartData.allChecked
    },
    AllChecked (checked) {
      this.All_Checked(checked)
      this.calc_m()
    },
    numChange () {
      this.Change_num(this.items)
      this.calc_m()
    },
    selcted (index) {
      this.single_checked({
        index,
        checked: this.items[index].checked
      })
      this.calc_m()
    },
    delListData (index) {
      Dialog.confirm({
        title: '删除',
        message: '确认删除该商品'
      })
        .then(() => {
          this.del_Data(index)
          this.calc_m()
        })
        .catch(() => {
        })
    },
    Order () {
      if (this.items.some(el => el.checked)) {
        const currentinfo = {
          id: Date.now(),
          items: this.items.filter(el => el.checked),
          contact: this.userInfo()
        }
        this.produce_order(currentinfo)
        this.$router.push('/order')
      }
    },
    userInfo () {
    },
    ...mapMutations('CartData', [
      'calc_m',
      'del_Data',
      'Change_num',
      'single_checked',
      'All_Checked',
      'single_Checked'
    ]),
    ...mapMutations('Order', [
      'produce_order'
    ]),
    onClickLeft () {
      this.$router.push('/home')
    }
  },
  created () {
    this.init()
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.CartData.data)),
      total: (state) => state.CartData.total * 100
    }),
    allChecked: {
      set (checked) {
        this.AllChecked(checked)
      },
      get () {
        return this.$store.state.CartData.allChecked
      }
    }
  },
  components: { Tabbar }
}
</script>

<style lang="scss" scoped>
.list {
  margin-top: 8px;
  margin-bottom: 5px;
  display: flex;
  .van-checkbox {
    background: #fafafa;
    width: 20px;
    padding: 0 10px;
  }
  .van-card {
    flex: 1;
  }
}
.delete-button {
  height: 100%;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
.van-submit-bar{
  margin-bottom: 50px;
}
</style>
